<template>
	<view class="bg">
		<uni-nav-bar dark 
		:fixed="true" 
		shadow="false" 
		:border="false" 
		background-color="#2A7CF7" 
		color="#fff"
		status-bar left-icon="left" 
		itle="就近加油" 
		@clickLeft="back" />
		
		<view class="jjjy_qh" @click="qh">
			<view class="ssk">
				<uni-search-bar  clearButton="none" cancelButton="none" radius="100" ></uni-search-bar>
			</view>
			<view class="qh_mode">
				<view class="qh_text">
					{{title_text}}
				</view>
			</view>
		</view>
		<!-- 地图模式 -->
		<view class="lbms" v-if="title_text === '地图模式'">
			<view class="qyxh">
				<view class="qybq" v-for="item in qyxh">{{item}}#</view>
			</view>
			<view class="fjjyzList">
				<view class="jyz"v-for="item in jyzList">
					<view class="jyz_title">
						<view>{{item.name}}</view>
						<view class="jyz_jl">{{item.distance}}m</view>
					</view>
					<view class="jyz_yh">
						<view class="jyz_yhItem">
							满200减20
						</view>
						<view class="jyz_yhItem">
							满200减20
						</view>
					</view>
					<view class="jyz_xq">
						<view>
							<image :src="item.image"  class="jyz_image"></image>
						</view>
						<view class="jyz_text" @click="toNext">
							<view class="jyz_yysj">营业时间：{{item.time}}</view>
							<view class="jyz_jg">￥{{item.price}}/升</view>
							<view class="jyz_dz">
							{{item.adress}}
								<image class="jyz_dz_image" src="/static/车联网服务-05就近加油_slices/plane.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 地图模式 -->
		<view class="dtms" v-if="title_text === '列表模式'">
			<view class="mapxx">
				<view class="map">
					<map :latitude="latitude" :longitude="longitude" :markers="covers" show-location="ture"></map>
				</view>
				<view class="bjdxx">
					<view class="bjdxx_text">
						<view class="bjdxx_tittle">中国石油加油站</view>
						<view class="bjdxx_dz">山阳区人民路与解放路交叉口</view>
						<view class="bjdxx_mdxq" @click="mdxq">
							<image src="/static/mdxq.png" class="mdxq_image"></image>门店详情>>
						</view>
					</view>
					<view>
						<image class="bjdxx_image" src="/static/jyz.png"></image>
					</view>
				</view>
				<view class="button">
					<button size="default" class="ljdh" @click="ljdh">立即导航</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title_text:"地图模式",
				qyxh:[90,92,93,95,97,98],
				jyzList:[{
					id:1,
					name:"中国石油加油站",
					image:"/static/车联网服务-00登录-01获取位置_slices/组 6.png",
					time:"周一至周五",
					price:5.66,
					adress:"山阳区人民路与解放路交叉口",
					distance:556
				},
				{
					id:2,
					name:"天润石油加油站",
					image:"/static/车联网服务-00登录-01获取位置_slices/组 6.png",
					time:"周一至周五",
					price:5.66,
					adress:"河南省郑州市高新区莲花街",
					distance:80000
				}],
				// 经纬度
				// 113.557825,34.828494
				// 经度
				longitude: 113.557825,
				// 纬度
				latitude: 34.828494,
				// :markers="covers"
				covers:[{
					id:0, // 使用 marker点击事件 需要填写id
					latitude: 34.828494,
					longitude: 113.557825, 
				    iconPath: '/static/车联网服务-05就近加油-02导航_slices/椭圆 3 拷贝 2.png',
					width:15,   //宽
					height:20   //高
				}]
			}
		},
		methods: {
			toNext(){
				uni.navigateTo({
					url:""
				})
			},
			back(){
				uni.navigateBack();
			},
			qh(){
				if(this.title_text === '地图模式' ){
					this.title_text ="列表模式" 
				}else{
					this.title_text ="地图模式" 
				}
			},
			ljdh(){
				var that = this
				// 经度
				// longitude: 113.557825,
				// 纬度
				// latitude: 34.828494,
				uni.navigateTo({
					url:""
				})
			},
			mdxq(){
				uni.navigateTo({
					url:''
				})
			}
		}
	}
</script>

<style>
	.jjjy_qh{
		display: flex;
		background-color: #2A7CF7;
	}
	.ssk{
		width: 600rpx;
		height: 40rpx;
		padding-top: 10rpx;
	}
	.qh_mode{
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		background-image: url("/static/车联网服务-05就近加油_slices/组 5.png");
		background-size: cover; /* 让背景图片覆盖整个容器 */
		background-position: center; /* 让背景图片居中显示 */  
		background-repeat: no-repeat; /* 不重复背景图片 */
		font-size: 32rpx;
		line-height: 30rpx;
		text-align: center;
		color: #fff;
	}
	.qh_text{
		/* line-height: 5rpx; */
		padding: 26rpx 20rpx;
		box-sizing: border-box;
	}
	.qyxh{
		width: 700rpx;
		margin: 0 auto;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		background-color: #2A7CF7;
	}
	.qybq{
		width: 100rpx;
		height: 70rpx;
		font-size: 40rpx;
		/* background-color: #fff; */
		text-align: center;
		border-radius: 10rpx;
		line-height: 70rpx;
		border: 1rpx #fff solid;
		color: #fff;
		/* margin-right: 5rpx; */
		background-color: transparent;	
	}
	.fjjyzList{
		width: 100%;
	}
	.jyz{
		width: 700rpx;
		height: 400rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 10rpx auto;
		padding: 30rpx 25rpx;
		box-sizing: border-box;
	}
	.jyz_title{
		display: flex;
		justify-content: space-between;
		font-size: 40rpx;
		font-weight: 700;
		margin-bottom: 30rpx;
	}
	.jyz_jl{
		color: skyblue;
		font-size: 30rpx;
		font-weight: 500;
	}
	.jyz_yh{
		display: flex;
	}
	.jyz_yhItem{
		width: 180rpx;
		background-color: #FFECE5;
		color: #FF7A52;
		font-size: 25rpx;
		font-weight: 700;
		text-align: center;
		margin: 0 10rpx;
	}
	.jyz_image{
		width: 240rpx;
		height: 180rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}
	.jyz_xq{
		display: flex;
		padding-top: 30rpx;
		box-sizing: border-box;
	}
	.jyz_text{
		padding-top: 10rpx;
	}
	.jyz_yysj{
		font-size: 25rpx;
		font-weight: 700;
		margin-bottom: 10rpx;
	}
	.jyz_jg{
		color: #FF7A52;
		font-size: 30rpx;
		font-weight: 700;
		margin-bottom: 10rpx;
	}
	.jyz_dz{
		font-size: 25rpx;
		font-weight: 700;
	}
	.jyz_dz_image{
		width: 25rpx;
		height: 25rpx;
		margin: auto 20rpx;
		/* margin-left: 10rpx; */
	}
	/* 地图模式 */
	.mapxx{
		width: 700rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 10rpx auto;
		padding: 30rpx 25rpx;
		box-sizing: border-box;
	}
	.map map{
		width: 650rpx;
		height: 900rpx;
	}
	.bjdxx_image{
		width: 200rpx;
		height: 150rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}
	.bjdxx{
		display: flex;
		justify-content: space-between;
		margin-top: 20rpx;
	}
	.bjdxx_mdxq{
		color: #2E77E9;
		font-size: 25rpx;

	}
	.mdxq_image{
		width: 20rpx;
		height: 20rpx;
		margin-right: 10rpx;
		margin-top: 5rpx;
	}
	.bjdxx_tittle{
		font-size: 30rpx;
		font-weight: 700;
	}
	.bjdxx_dz{
		font-size: 20rpx;
		margin: 20rpx 0;
	}
	.button{
		margin-top: 20rpx;
	}
	.ljdh{
		border-radius: 50rpx;
		color: #fff;
		background-image: linear-gradient(#3688fe, #0A64E7);
	}
</style>
